<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="m/head :: head"></div>

</head>

<body class="body-gray">

<div class="loginwrap">

    <!--公用头部-->
    <div class="headwrap">
        <div class="order-title">
            <i class="iconfont icon-zuojiantou"></i>
            <h2>选择城市</h2>
        </div>
    </div>


    <!--主体内容-->
    <div class="city-content">
        <!--<div class="title">
            <div class="position">
                您的位置：
            </div>
            <div class="city-top">
                北京
            </div>
        </div>-->
        <div class="city-list">
            <div class="city-choice-top">选择城市</div>

            <ul th:each="item:${initials}">
                <li th:id="${item.toLowerCase()}" style="background: #fafafa; font-weight: bold;" th:text="${item}"></li>
                <li class="city-item" th:each="city:${areas}" th:if="${city.initial eq item}" th:attr="data-item-id=${city.id}" th:text="${city.name}"></li>
            </ul>

        </div>
        <div class="right-nav">
            <ul>
                <li>首字母</li>
                <li th:each="item:${initials}"><a th:href="${'#' + item.toLowerCase()}" th:text="${item}"></a></li>
            </ul>
        </div>
    </div>

</div>
</body>

<div th:replace="m/foot :: footer('baidu.hide')"></div>

<script>
    $(function () {
        $('.icon-zuojiantou').click(function () {
            $('#city-selector', parent.document).hide();
        })
        
        $('.city-item').click(function () {
            $('#location-select-btn', parent.document).text(this.innerText);
            $('input[name="location"]', parent.document).val($(this).attr('data-item-id'));
            $('#city-selector', parent.document).hide();
        })
    })
</script>
</html>
